<template>
	<view class="box">
		<view class="list">
			<view class="item" :style="[{'background-image':`url(${item.pic_url})`}]" v-for="(item,index) in list" :key="item.id" @click="navTo(item.id)">
				<view class="name">{{item.name}}</view>
				<view class="subtitle">{{item.subtitle}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		methods: {
			getProduct() {
				this.$request({ url: this.$api.default.cat_list }).then(res => {
					if (res.code == 0) {
						console.log(res.data.list);
						this.list = res.data.list;
					}
				});
			},
			navTo(id){
				uni.navigateTo({
					url:`/pages/cats/cats?options.cat_id=${id}`
				})
			}
		},
		created() {
			this.getProduct()
		}
	}
</script>

<style lang="scss" scoped>
.box{
	background-color: #fff;
}
.list{
	display: flex;
	flex-wrap: wrap;
	padding: 40upx 20upx;
	justify-content: space-between;
	.item{
		width: calc(50% - 10upx);
		height: 266.25upx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		margin-bottom: 20upx;
		color: #fff;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.name{
			font-weight: bold;
			font-size: 1.1em;
			margin-bottom: 10upx;
		}
		.subtitle{
			font-size: 0.9em;
			color: #ccc;
		}
	}
}
</style>
